<template>
  <div class="model-list-body" v-if="filterStates.length">
    <div class="header">
      <div class="left-title">
        <img class="left-img" src="https://img.js.design/assets/img/62732d175330b31038157f2c.png">
<!--        {{filterStates}}-->
<!--        {{state}}-->
                <span class="title2" v-for="item in filterStates" :class="state == item ? 'activeClass':''" @click="state = item">{{['直播预告','正在直播','直播回放'][item]}}</span>
      </div>
      <div class="right-more">
        <span @click="moreLiveBroadCast">更多</span>
        <el-icon>
          <ArrowRightBold/>
        </el-icon>
      </div>
    </div>
    <div class="body">
      <el-row :gutter="20" v-if="LiveReserveList.rows">
        <!--      {{LiveReserveList.rows.slice(0,4)}}-->
        <el-col
            v-for="(item, index) in LiveReserveList.rows.slice(0,4)"
            :key="item"
            :span="6"
        >
          <el-card @click="toCourse(item)" :body-style="{ padding: '0px',cursor: 'pointer' }">
            <img
                height="160"
                :src="item.bannerPic ? item.bannerPic:require('../assets/defaultImg.png')"
                class="image"
            />
            <div>
              <span class="videoTitle">{{ item.title }}</span>
              <div class="video-bottom">
                <div></div>
                <el-button v-if="state == 1" text class="button"><span
                    style="color: rgba(153, 153, 153, 1);">{{
                    `开始时间：${proxy.$filters.dateTimeFormat2(item.startTime)}`
                  }}</span>
                </el-button>
                <el-button v-else-if="state == 0" text class="button"><span
                    style="color: rgba(153, 153, 153, 1);">{{
                    `直播时间：${proxy.$filters.dateTimeFormat2(item.startTime)}`
                  }}</span>
                </el-button>
                <el-button v-else-if="state == 2" text class="button"><span
                    style="color: rgba(153, 153, 153, 1);">{{
                    `视频时长：${proxy.$filters.timeFormat(item.duration)}`
                  }}</span>
                </el-button>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col v-if="!LiveReserveList.rows.length">
          <el-empty description="暂无数据"/>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {ElMessageBox, ElMessage} from 'element-plus'
import {ref, getCurrentInstance, onMounted, watchEffect, reactive, toRaw,watch} from "vue";
import {useRouter} from "vue-router";
import {liveReserve, liveReserveReserve} from "@/api/api";

export default {
  name: "IndexModelList",
  props: {
    activeCourse: {
      type: String
    },
    activeCourseName: {
      type: String
    },
    filterStates:{
      type:Array,
      default:[]
    }
  },
  setup(props) {
    //直播列表
    let state = ref(1);
    let LiveReserveList = ref([]);
    let getLiveReserve = () => {
      liveReserve({state: state.value, courseID: localStorage.getItem('activeCourse')}).then(res => {
        console.log('直播列表', res)
        LiveReserveList.value = res.data;
      })
    }
    watch(()=>props.filterStates,() =>{
      state.value = props.filterStates[0]
    },{deep:true,immediate:true
    })
    watchEffect(() => {
      let activeCourse = props.activeCourse;
      console.log('直播activeCourseParam', activeCourse, props.activeCourseName);
      getLiveReserve();
    })

    const currentDate = ref(new Date());
    let router = useRouter();
    const {proxy} = getCurrentInstance()
    let toCourse = (item) => {
      console.log(toRaw(item))
      if (state.value == 0) {
        ElMessageBox.confirm(
            `<div>
               <div style="position: relative;width: 100%;height: 220px;border-top-left-radius: 10px;border-top-right-radius: 10px;overflow: hidden">
                    <img style="position: absolute;top: 0;transform: translate(0,-50%);" width="100%" src="${toRaw(item).bannerPic}"/>
                </div>
                <div>
                   <div>
                        <p style="font-size: 16px;font-weight: bold;margin: 10px 0px">${toRaw(item).title}</p>
                        <div style="display: flex;align-items: center">
                          <div style="padding: 2px 10px;background: #00a5ff;color: white;margin-right: 14px;border-radius: 4px">直播</div>
                          <div>讲师：${toRaw(item).admin.name}</div>
                        </div>
                   </div>
                   <div style="display: block;height: 1px;width: 100%;margin: 14px 0;background: #dcdfe6"></div>
                   <div style="margin-bottom: 20px">
                        <div style="display: flex;">
                          <div style="padding: 2px 10px;background: #00a5ff;color: white;margin-right: 14px;border-radius: 4px;height: 24px">直播时间</div>
                          <div>${proxy.$filters.dateTimeFormat(toRaw(item).broadcastDate).substring(0, 10)}</div>
                        </div>
                   </div>
<!--                   <div style="margin-bottom: 20px">-->
<!--                        <div style="display: flex;">-->
<!--                          <div style="padding: 2px 10px;background: #00a5ff;color: white;margin-right: 14px;border-radius: 4px;width: 120px;height: 24px">讲师介绍</div>-->
<!--                          <div>-->
<!--                          -->
<!--                          </div>-->
<!--                   </div>-->
                </div>
             </div>`,
            '直播详情',
            {
              dangerouslyUseHTMLString: true,
              confirmButtonText: '立即预约/取消预约',
              cancelButtonText: '取消',
              showClose: false,
              customClass: 'msgbox'
            }
        )
            .then(() => {
              liveReserveReserve({liveStreamingID: item.id}).then(res => {
                ElMessage({
                  type: 'success',
                  message: res.data.message == '添加成功' ? '预约成功' : '取消预约',
                })
              })
            })
            .catch(() => {

            })
      } else {
        router.push({name: 'liveStreaming', params: {id: item.id, state: state.value}})
      }
    }

    let moreLiveBroadCast = () => {
      router.push({name: 'MoreBroadCast', params: {state: state.value}})
    }
    return {
      moreLiveBroadCast,
      state,
      LiveReserveList,
      getLiveReserve,
      proxy,
      toCourse,
      currentDate
    }
  }
}
</script>

<style>
.videoTitle {
  margin-top: 5px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 1rem;
  font-size: 1rem;
}

.msgbox {
  width: 40%;
}

.el-empty {
  padding: 0px;
}

.time {
  font-size: 12px;
  color: #999;
}

.video-bottom {
  line-height: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  font-size: 0.875rem;
  margin-right: 0.5rem;
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}
</style>

<style scoped>
.right-text {
  margin-left: 10px;
}

.activeClass {
  color: rgba(51, 51, 51, 1) !important;
  font-size: 20px;
  font-weight: 400;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0px;
}

.model-list-body {
  width: 100%;
  height: 50%;
}

.left-title {
  display: flex;
  align-items: center;
}

.left-title .left-img {
  width: 1.8125rem;
  margin-right: 1rem;
}

.header .left-title .title2 {
  font-size: 16px;
  color: rgba(128, 128, 128, 1);
  cursor: pointer;
}
.header .left-title .title2:not(:first-child){
  margin-right: 10px;
}

.right-more {
  display: flex;
  align-items: center;
  color: rgba(153, 153, 153, 1);
  cursor: pointer;
}
</style>
